<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @edit="handleUpdate"
      @multi-actions="handleMultiActions"
    >

      <template slot="filter-content">

        <dic-list-select v-model="listQuery.params.cusType" dic-code="cus_type" title="客户类型" />
        <dic-list-select v-model="listQuery.params.source" dic-code="source" title="客户来源" />
        <dic-list-select v-model="listQuery.params.level" dic-code="level" title="客户级别" />
        <el-input v-model="listQuery.params.name" style="width: 200px" placeholder="搜索客户名称" class="filter-item" />

<!--        <el-button-group class="filter-item" style="float:  right">-->
<!--          <el-button v-permission="['customer:keep:import']" size="mini" icon="el-icon-upload2" @click="showImport">导入</el-button>-->
<!--          <el-button v-permission="['customer:keep:export']" size="mini" icon="el-icon-download" @click="exportExcel">导出</el-button>-->
<!--        </el-button-group>-->

      </template>

      <template slot="data-columns">

        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column
          label="客户名称"
          show-overflow-tooltip>

          <template slot-scope="scope">
            <router-link class="router-link" :to="{name: 'CustomerKeepUpdate', params:{id: scope.row.id, flag: 'keep'}}">
              {{scope.row.name}}
            </router-link>
          </template>

        </el-table-column>

        <el-table-column
          align="center"
          label="业务经理"
          prop="ownerId_dictText"
        />

        <el-table-column
          align="center"
          label="邮箱"
          prop="email"
        />

        <el-table-column
          align="center"
          label="手机号"
          prop="mobile"
        />

        <el-table-column
          align="center"
          label="客户类型"
          prop="cusType_dictText"
        />

        <el-table-column
          align="center"
          label="客户级别"
          prop="level_dictText"
        />

        <el-table-column
          align="center"
          label="跟进时间"
          prop="contactTime"
          sortable="custom"
        />

        <el-table-column
          align="center"
          label="操作"
        >

          <template slot-scope="scope">
            <el-button type="default" size="mini" @click="handleUpdate(scope.row.id)">详情</el-button>
            <el-button type="danger" size="mini" @click="handleRelease(scope.row.id)">释放</el-button>
          </template>
        </el-table-column>

      </template>
    </data-table>

    <el-dialog title="释放客户" :close-on-click-modal="false" :append-to-body="true" :visible.sync="dialogVisible" width="500px">

      <el-form ref="postForm" :model="postForm" label-position="left" :rules="rules" label-width="100px">

        <el-form-item label="最终结果" prop="result">
          <dic-list-select v-model="postForm.result" dic-code="customer_track" style="width: 100%" />
        </el-form-item>

        <el-form-item label="释放理由" prop="remark">
          <el-input v-model="postForm.remark" type="textarea" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleReleaseBatch">确 定</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import permission from '@/directive/permission'
import DicListSelect from '@/components/DicListSelect'
import { apiCustomerRelease } from '@/api/customer/customer'

export default {
  directives: { permission },
  components: { DicListSelect, DataTable },
  props: {

  },
  data() {
    return {

      dialogVisible: false,
      postForm: {
        ids: []
      },

      listQuery: {
        current: 1,
        size: 10,
        params: {

        }
      },

      options: {

        add: {
          enable: true,
          permission: 'customer:keep:add',
          router: { name: 'CustomerKeepAdd', params: { flag: 'keep' }}
        },
        edit: {
          enable: true,
          permission: 'customer:keep:update',
          router: { name: 'CustomerKeepUpdate', params: { id: '$id', flag: 'keep' }}
        },
        delete: {
          enable: true,
          permission: 'customer:keep:delete',
          url: '/api/sys/user/delete'
        },

        // 列表请求URL
        listUrl: '/api/customer/customer/paging-keep',
        // 批量操作列表
        multiActions: [
          {
            permission: 'customer:release',
            value: 'batchRelease',
            label: '批量释放'
          }
        ]
      }
    }
  },

  created() {

  },

  methods: {

    handleUpdate(id) {
      this.$router.push({ name: 'CustomerKeepUpdate', params: { id: id, flag: 'keep' }})
    },

    handleMultiActions(event) {
      if (event.opt === 'batchRelease') {
        this.postForm.ids = event.ids
        this.dialogVisible = true
      }
    },

    handleRelease(id) {
      this.postForm.ids = [id]
      this.dialogVisible = true
    },

    handleReleaseBatch() {
      // 删除
      this.$confirm('确实要释放客户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiCustomerRelease(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '客户释放成功!'
          })
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        })
      })
    }
  }
}
</script>
